<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">

    <p @click="change_num">{{num}}</p>
    <p>十位:{{shi}}</p>
    <p>个位:{{ge}}</p>


</div>
<!--
监听事件   监听的是一个值,监听data中已经存在的变量的变化
监听的值一旦发生变化,则会触发监听事件
监听事件不需要返回值
-->
<script>
    new Vue({
        el: "#app",
        data: {
            num: "20",
            shi: "",
            ge: "",
        },
        methods: {
            change_num() {
                this.num--;
            }
        },
        watch: {
            // 监听的是data的num变量
            num() {
                this.shi = parseInt(this.num / 10);
                this.ge = this.num % 10;
            }
        },
    })
</script>
</body>
</html>